<!--
 * @Author: wjk
 * @Date: 2020-11-11 16:03:31
 * @LastEditors: wjk
 * @LastEditTime: 2020-11-18 09:28:43
 * @description: file content
-->
<template>
  <view class="authorization-wrapper">
    <view v-if="!showResult" class="authorization">
      <view class="p">授权处理中</view>
      <view class="view">
        <image :src="`${baseUrl}/images/biHuaSuan/taobao.png`" class="logo" />
        <image :src="`${baseUrl}/images/biHuaSuan/line.png`" class="line" />
        <image style="border-radius: 4px;" :src="`${baseUrl}/images/logo.png`" class="logo" />
      </view>
    </view>
    <view v-else class="mask-wrapper">
      <view class="mask">
        <view class="img">
          <image v-if="showResult === 'fail'" id="error" :src="`${baseUrl}/images/biHuaSuan/lose.png`" />
          <image v-else id="success" :src="`${baseUrl}/images/biHuaSuan/success.png`" />
        <!-- 失败img/lose.png -->
        </view>
        <view class="text">
          <view id="p1" class="p">{{ title }}</view>
          <view id="p2" class="p gray">{{ subTitle }}</view>
        </view>
        <view id="btn" class="button" @click="_back">知道了</view>
      </view>
    </view>
  </view>
</template>
<script>
import { toBackPage } from '@/utils/navigateTo'
import './index.scss'
export default {
  data() {
    return {
      baseUrl: Object.freeze(`${process.env.VUE_APP_IMAGE_ASSET}`),
      showResult: '',
      title: '授权失败',
      subTitle: '未传平台参数code,state'
    }
  },
  onLoad(options) {
    this.getStatusCode(options)
  },
  computed: {
  },
  methods: {
    _back() {
      toBackPage(2, 'close')
    },
    async getStatusCode(option) {
      const res = await this.$api.biHuaSuanApi.getStatusCode(option)
      if (res.code) {
        this.showResult = 'fail'
        if (option.code) {
          this.title = '授权失败'
          this.subTitle = res.msg || '淘宝授权失败'
        }
        return
      }
      this.showResult = 'success'
      this.title = '授权成功'
      this.subTitle = ''
    }
  }
}
</script>
